<template>
    <div class="youKnowWrapper" @touchstart="hideWrapper($event)"
         @touchcancel="Wrapper($event)" @touchend="Wrapper($event)"
         @touchmove="fingerMoving($event)"
         ontouchstart="event.stopPropagation()">
        <div class="youKnow">
            <div class="newTextAni"
                 :class="{textMoving: showTextMoving === 'textMoving', textMoving2: showTextMoving === 'textMoving2'}">
                <div v-for="item in show.textImage" class="textImage" :class="{'marginChange': !showArrow}"
                     :style="{'background-image': 'url(' + item + ')'}"></div>
                <div class="textAnswer"
                     :style="{'background-image':'url(' + show.showAText + ')'}"
                     v-show="showTextAnswer"></div>
                <div class="arrow" @touchend="changeText()" v-show="showArrow"></div>
            </div>

            <canvas class="myCanvas" id="myCanvas"></canvas>
            <img id="imgBox" :src="finalImg" alt=""
                 :class="{ 'hide': hideW}"
                 crossOrigin="Anonymous" ref="Image">
            <div class="wrapper"
                 :class="{'hide': hideW, smaller: isSmaller}"
                 :style="{'background-image':'url(' + show.showImg + ')'}">
                <div class="username">{{name}}</div>
                <div class="code"><img id="headimgurl" :src="headimgurl" ref="headImg"/></div>
                <div class="fingerprint"></div>
            </div>
            <div class="shrimp" :class="{'hide': hideW}" @touchend="catchShrimp()"></div>
        </div>

    </div>
</template>

<script>
  import facejie from '../../img/jie/faceJie.png';
  import handjie from '../../img/jie/handJie.png';
  import legjie from '../../img/jie/legJie.png';
  import heartjie from '../../img/jie/heartJie.png';
  import youknowjie from '../../img/jie/youknowJie.png';

  import facejie2 from '../../img/jie/faceJie2.png';
  import handjie2 from '../../img/jie/handJie2.png';
  import legjie2 from '../../img/jie/legJie2.png';
  import heartjie2 from '../../img/jie/heartJie2.png';
  import youknowjie2 from '../../img/jie/youknowJie2.png';

  import logo from '../../img/index/logoGreen.png';
  import code from '../../img/jie/code.png';
  import shrimp from '../../img/jie/shrimp.png';
  import background from '../../img/index/background.jpg';
  import fingerprint from '../../img/jie/fingerprint2.gif';

  import faceA from '../../img/jie/faceA.png';
  import handA from '../../img/jie/handA.png';
  import legA from '../../img/jie/legA.png';
  import heartA from '../../img/jie/heartA.png';
  import youknowA from '../../img/jie/youknowA.png';

  import faceAnswer from '../../img/textMoving/face (4).png';
  import handAnswer from '../../img/textMoving/hand (4).png';
  import legAnswer from '../../img/textMoving/leg (4).png';
  import heartAnswer from '../../img/textMoving/heart (4).png';
  import youknowAnswer from '../../img/textMoving/youknow (4).png';

  import textImages from '../../img/textMoving/textMoving';

//    window.headimgurl = 'http://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epKgrcbDrMyBDZTxCpNApia5kH2yiaQvpZP6RcFnSy5jD4EbJQJJaZOwmauGEQjJ9xOAibSFOMv6Zoeg/0';
  export default {
    props: ['resources', 'pageType', 'jieImg'],
    data() {
      return {
        headimgurl: window.headimgurl,
        textData: {
          'face': {
            A: faceA,
            AImg: faceAnswer,
            textImage: textImages.face,
            jie: facejie,
            jie2: facejie2,
          },
          'hand': {
            A: handA,
            AImg: handAnswer,
            textImage: textImages.hand,
            jie: handjie,
            jie2: handjie2,
          },
          'leg': {
            A: legA,
            AImg: legAnswer,
            textImage: textImages.leg,
            jie: legjie,
            jie2: legjie2,
          },
          'heart': {
            A: heartA,
            AImg: heartAnswer,
            textImage: textImages.heart,
            jie: heartjie,
            jie2: heartjie2,
          },
          'youknow': {
            A: youknowA,
            AImg: youknowAnswer,
            textImage: textImages.youknow,
            jie: youknowjie,
            jie2: youknowjie2,
          }
        },
        show: {
          showText: faceA,
          showAText: faceAnswer,
          textImage: textImages.face,
          showImg: facejie,
          jie: facejie,
          jie2: facejie2,
        },
        showArrow: true,
        hideW: true,
        drawImgs: [background, logo, code, window.headimgurl, shrimp, fingerprint],
        showWrapper: true,
        finalImg: '',
        name: '张三尾气热',
        position: {startY: '', endY: ''},
        textMoving: '',
        showTextMoving: '',
        isSmaller: false,

        testUrl: ''
      }
    },
    mounted() {

      this.testUrl = window.headimgurl;
      this.showImgFun();
      this.drawImage();

      this.name = window.nick;
      if (this.name.length > 5) {
        this.name = this.name[0] + '***' + this.name[this.name.length - 1];
      }


    },
    methods: {
      showImgFun() {
        let type = this.textData.face;
        switch (this.jieImg) {
          case 'faceJie':
            type = this.textData.face;
            break;
          case 'handJie':
            type = this.textData.hand;
            break;
          case 'legJie':
            type = this.textData.leg;
            break;
          case 'heartJie':
            type = this.textData.heart;
            break;
          case 'youknowJie':
            type = this.textData.youknow;
            break;
        }
        this.show = {
          showText: type.A,
          showAText: type.AImg,
          showImg: type.jie,
          jie2: type.jie2,
          textImage: type.textImage,
        };
        this.drawImgs.push(type.A);
        this.drawImgs.push(type.jie2);
      },
      catchShrimp() {
        this.$emit('update:pageType', 'commodity');
      },
      drawImage() {
        let self = this;

        let myCanvas = document.getElementById('myCanvas');
        let context = myCanvas.getContext('2d');

        // 屏幕的设备像素比
        var devicePixelRatio = window.devicePixelRatio || 1;

        // 浏览器在渲染canvas之前存储画布信息的像素比
        var backingStoreRatio = context.webkitBackingStorePixelRatio ||
          context.mozBackingStorePixelRatio ||
          context.msBackingStorePixelRatio ||
          context.oBackingStorePixelRatio ||
          context.backingStorePixelRatio || 1;

        // canvas的实际渲染倍率
        var ratio = devicePixelRatio / backingStoreRatio;

        var clientWidth = document.documentElement.clientWidth;
        var clientHeight = document.documentElement.clientHeight;

        console.log(ratio + '--' + clientWidth + '--' + clientHeight, clientWidth / clientHeight);
        myCanvas.style.width = clientWidth + 'px';
        myCanvas.style.height = clientWidth * (1334 / 750) + 'px';
        this.$refs.Image.style.width = clientWidth + 'px';
        this.$refs.Image.style.height = clientWidth * (1334 / 750) + 'px';
        myCanvas.width = 750 * ratio;
        myCanvas.height = 1334 * ratio;

        this.showClue = false;

        let drawImages = (item, left, top, width, height) => {
          let img = new Image();
          img.crossOrigin = "Anonymous";
          img.src = item;
          img.onload = () => {
            if (item === background) {
              context.drawImage(img, left * ratio, top * ratio, width * ratio, height * ratio);
            } else {
              setTimeout(() => {
                context.drawImage(img, left * ratio, top * ratio, width * ratio, height * ratio);
              }, 400);
            }
          }
        };

        //先绘制背景图
        drawImages(background, 0, 0, 750, 1334);

        this.drawImgs.forEach((item, index) => {
          switch (item) {
            case logo:
              let a = clientWidth / clientHeight > 0.623 ? 208 : 169;
              drawImages(item, 247, a, 257, 34);
              break;
            case code:
              drawImages(item, 272, 827, 208, 207);
              break;
            case this.headimgurl:
              console.log('headimgrul: ', this.headimgurl);
              console.log('headimgrul: ', item);
              console.log('headimgrul: ', item === this.headimgurl);

              setTimeout(() => {
                let img = new Image();
                img.crossOrigin = "Anonymous";
                img.iscorssOrigin = false;
                img.onload = () => {
                    console.log('头像');
                  setTimeout(() => {
                    context.drawImage(img, 347 * ratio, 902 * ratio, 58 * ratio, 58 * ratio);
                  }, 100);
                };
                img.src = this.$refs.headImg.src;
              }, 400);
              setTimeout(() => {

                //名字填充
                context.fontWeight = 'bold';
                context.fillStyle = '#028559';
                context.textAlign = 'right';
                context.font = 45 * ratio + "px '微软雅黑'";
                context.fillText(this.name, 340 * ratio, 630 * ratio);

                let toImg = myCanvas.toDataURL("image/jpeg", 0.1);
                let img4 = new Image();
                img4.crossOrigin = "Anonymous";
                img4.src = toImg;
                self.finalImg = toImg;
              }, 600);
              break;
            case shrimp:
              drawImages(item, 304, 1115, 130, 102);
              break;
            case fingerprint:
              drawImages(item, 254, 1045, 45, 45);
              break;
            case this.show.jie2:
              drawImages(item, 0, 0, 750, 1334);
              break;
            case faceA:
              drawImages(item, 192, 271, 369, 248);
              break;
            case handA:
              drawImages(item, 192, 271, 364, 240);
              break;
            case legA:
              drawImages(item, 120, 271, 493, 245);
              break;
            case heartA:
              drawImages(item, 133, 271, 484, 247);
              break;
            case youknowA:
              drawImages(item, 175, 271, 409, 243);
              break;
          }
        });
      },
      fingerMoving() {
        this.position.endY = event.targetTouches[0].pageY;
      },
      hideWrapper(event) {
        this.showWrapper = false;
        this.position.startY = event.targetTouches[0].pageY;
      },
      Wrapper() {
        let valueY = Math.abs(this.position.endY - this.position.startY);
        if (this.position.endY && valueY > 50) {
          this.changeText();
        }
        this.showWrapper = true;
      },
      changeText() {
        var clientWidth = document.documentElement.clientWidth;
        var clientHeight = document.documentElement.clientHeight;
        this.showTextMoving = clientWidth / clientHeight > 0.66 ? 'textMoving' : 'textMoving2';
        this.isSmaller = clientWidth / clientHeight > 0.66 ? true : false;
//        console.log('showTextMoving:', this.showTextMoving);

        this.showArrow = false;
        this.showTextAnswer = true;
        setTimeout(() => {
          this.hideW = false;
        }, 3000);
      }
    },
    components: {}
  }
</script>
<style lang="less" scoped>
    .youKnowWrapper {
        height: 100%;
        width: 100%;
        background-image: url("../../img/index/background.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        z-index: 9;
        overflow: hidden;
        .youKnow {
            width: 100%;
            height: 100%;
            .newTextAni {
                width: 100%;
                height: 4rem;
                position: absolute;
                top: 6rem;
                left: 0;
                .textImage {
                    width: 100%;
                    height: 0.53rem;
                    background-size: 100%;
                    background-repeat: no-repeat;
                    margin-bottom: 0.5rem;
                }
                .textAnswer {
                    background-image: url("../../img/jie/faceAnswer.png");
                    background-repeat: no-repeat;
                    background-size: 100%;
                    height: 0.93rem;
                    width: 100%;
                    position: absolute;
                    top: 3rem;
                    left: 0;
                    -webkit-animation: textMoving 1s;
                    animation: textMoving 1s;
                    animation-fill-mode: forwards;
                }
                .marginChange {
                    -webkit-animation: marginChange 3s;
                    animation: marginChange 3s;
                    animation-fill-mode: forwards;
                }
                @keyframes marginChange {
                    80% {
                        margin-bottom: 0.5rem;
                    }
                    100% {
                        margin-bottom: 0.4rem;
                    }
                }
                @-webkit-keyframes marginChange {
                    80% {
                        margin-bottom: 0.5rem;
                    }
                    100% {
                        margin-bottom: 0.4rem;
                    }
                }
                @keyframes textMoving {
                    0% {
                        opacity: 0;
                        transform: scale(0);
                    }
                    100% {
                        opacity: 1;
                        transform: scale(1);
                        top: 2.8rem;
                    }
                }
                @-webkit-keyframes textMoving {
                    0% {
                        opacity: 0;
                        transform: scale(0);
                    }
                    100% {
                        opacity: 1;
                        transform: scale(1);
                        top: 2.8rem;
                    }
                }
                .arrow {
                    background-image: url("../../img/jie/next.png");
                    background-repeat: no-repeat;
                    background-size: 100%;
                    width: 0.55rem;
                    height: 0.56rem;
                    position: absolute;
                    top: 100%;
                    left: 45%;
                    -webkit-animation: arrowPointing 1s infinite;
                    animation: arrowPointing 1s infinite;
                }
                @keyframes arrowPointing {
                    0%, 100% {
                        top: 100%;
                    }
                    50% {
                        top: 105%;
                    }
                }
                @-webkit-keyframes arrowPointing {
                    0%, 100% {
                        top: 100%;
                    }
                    50% {
                        top: 105%;
                    }
                }
            }
            .textMoving {
                -webkit-animation: QAMoving 3s;
                animation: QAMoving 3s;
                animation-fill-mode: forwards;
            }
            @keyframes QAMoving {
                80% {
                    transform: scale(1);
                    top: 6rem;
                }
                100% {
                    transform: scale(0.68);
                    top: 1rem;
                }
            }
            @-webkit-keyframes QAMoving {
                80% {
                    transform: scale(1);
                    top: 6rem;
                }
                100% {
                    transform: scale(0.68);
                    top: 1rem;
                }
            }
            .textMoving2 {
                -webkit-animation: QAMoving2 3s;
                animation: QAMoving2 3s;
                animation-fill-mode: forwards;
            }
            @keyframes QAMoving2 {
                80% {
                    transform: scale(1);
                    top: 6rem;
                }
                100% {
                    transform: scale(0.8);
                    top: 1.5rem;
                }
            }
            @-webkit-keyframes QAMoving2 {
                80% {
                    transform: scale(1);
                    top: 6rem;
                }
                100% {
                    transform: scale(0.8);
                    top: 1.5rem;
                }
            }

            img {
                position: absolute;
                bottom: 0;
                left: 0;
                opacity: 0;
            }
            .wrapper {
                height: 100%;
                width: 100%;
                background-image: url("../../img/jie/youknowJie.png");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: bottom;
                position: absolute;
                top: 0;
                left: 0;
                pointer-events: none;

                /*display: none;*/

                .username {
                    height: 0.8rem;
                    position: absolute;
                    right: 5.47rem;
                    bottom: 9.15rem;
                    font: 0.6rem '微软雅黑';
                    text-align: right;
                    color: #028559;
                }
                .fingerprint {
                    width: 0.6rem;
                    height: 0.6rem;
                    background-image: url("../../img/jie/fingerprint2.gif");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    position: absolute;
                    left: 3.4rem;
                    bottom: 3.3rem;
                }
                .code {
                    width: 2.77rem;
                    height: 2.76rem;
                    position: absolute;
                    bottom: 4rem;
                    left: 3.63rem;
                    background-image: url("../../img/jie/code.png");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    img {
                        width: 0.77rem;
                        height: 0.77rem;
                        position: absolute;
                        top: 1rem;
                        left: 1rem;
                        opacity: 1;
                    }
                }
            }
            .smaller {
                transform: scale(0.9);
                top: 0.5rem;
            }

            .myCanvas {
                display: none;
            }
            .shrimp {
                width: 1.73rem;
                height: 1.36rem;
                position: absolute;
                bottom: 1.56rem;
                left: 2.48rem;
                z-index: 8;
                background-image: url("../../img/jie/shrimp.png");
                background-size: 100%;
                background-repeat: no-repeat;
                -webkit-animation: leftMove 2s infinite linear;
                animation: leftMove 2s infinite linear;

                /*display: none;*/
            }
            @keyframes leftMove {
                0% {
                    left: 5.85rem;
                    bottom: 1.51rem;
                }
                5%, 15%, 25%, 35%, 55%, 65%, 75%, 85% {
                    bottom: 1.56rem;
                }
                10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% {
                    bottom: 1.51rem;
                }
                45% {
                    bottom: 1.56rem;
                    transform: rotateY(0deg);
                }
                50% {
                    bottom: 1.56rem;
                    left: 2.48rem;
                    transform: rotateY(180deg);
                }

                95% {
                    bottom: 1.51rem;
                    transform: rotateY(180deg);
                }
                100% {
                    left: 5.85rem;
                    transform: rotateY(0deg);
                }
            }
            @-webkit-keyframes leftMove {
                0% {
                    left: 5.85rem;
                    bottom: 1.51rem;
                }
                5%, 15%, 25%, 35%, 55%, 65%, 75%, 85% {
                    bottom: 1.56rem;
                }
                10%, 20%, 30%, 40%, 60%, 70%, 80%, 90% {
                    bottom: 1.51rem;
                }
                45% {
                    bottom: 1.56rem;
                    transform: rotateY(0deg);
                }
                50% {
                    bottom: 1.56rem;
                    left: 2.48rem;
                    transform: rotateY(180deg);
                }

                95% {
                    bottom: 1.51rem;
                    transform: rotateY(180deg);
                }
                100% {
                    left: 5.85rem;
                    transform: rotateY(0deg);
                }
            }

            .hide {
                display: none;
            }
        }

    }
</style>
